<!-- eslint-disable vue/multi-word-component-names -->
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue'
import { hexToRgb } from '@/utils/color'

const show_dialog = ref<Boolean>(false)
const outsize_close = ref<Boolean>(true)

const color = reactive({
  color: '#FFE56E',
  alpha: 0.75
})

const backdrop_color = computed(() => {
  let rgb = hexToRgb(color.color)
  return `rgba(${rgb?.r}, ${rgb?.g}, ${rgb?.b}, ${color.alpha})`
})

const _code = ref<String>(
  `
 <div>
    current show: {{ show_dialog }} <br />
    current outsideclick: {{ outsize_close }} <br />
    <br />
    <div>
      <div>
        <input type="color" v-model="color.color" />
        <input type="range" min="0" max="1" step="0.01" v-model="color.alpha" />
        {{ color }} => {{ backdrop_color }}
      </div>
    </div>
  </div>

  <AlexBtn @click="show_dialog = true">按钮测试</AlexBtn>
  <AlexBtn @click="outsize_close = !outsize_close">禁用外部点击</AlexBtn>
  <AlexDialog
    v-model:show="show_dialog"
    :outside-close="outsize_close"
    top="50%"
    :backdrop="backdrop_color"
  >
    <div style="height: 20rem; min-width: 20rem"></div>
  </AlexDialog>
  `
)
</script>

<template>
  <div>
    代码如下：
    <pre style="overflow: scroll">{{ _code }}</pre>
  </div>
  <br /><br />

  <div>
    current show: {{ show_dialog }} <br />
    current outsideclick: {{ outsize_close }} <br />
    <br />
    <div>
      <div>
        <input type="color" v-model="color.color" />
        <input type="range" min="0" max="1" step="0.01" v-model="color.alpha" />
        {{ color }} => {{ backdrop_color }}
      </div>
    </div>
  </div>

  <AlexBtn @click="show_dialog = true">按钮测试</AlexBtn>
  <AlexBtn @click="outsize_close = !outsize_close">禁用外部点击</AlexBtn>
  <AlexDialog
    v-model:show="show_dialog"
    :outside-close="outsize_close"
    top="50%"
    :backdrop="backdrop_color"
  >
    <div style="height: 20rem; min-width: 20rem"></div>
  </AlexDialog>
</template>

<style lang="scss">
.alex-dialog {
  font-size: 20px;
}
.alex-btn {
  --alex-btn-font-color: #fff;
  --alex-btn-bg: #7f4123;
}
</style>
